<template>
  <div>
    <button @click="show = !show">切换显示div</button>
    <button @click="color = 'red'">修改颜色</button>
    <p>color的值是： {{ color }}</p>
    <div v-if="show" class="box" v-color="color">我是div</div>

    <!-- 如果你要给挖的槽填坑，就必须用双标签 -->
    <my-card>
      <!-- template最终不会显示到界面，它仅仅只用来做包裹 -->
      <!-- 好方便把某堆东西统一给某个插槽 -->
      <!-- <template v-slot:header> -->
      <!-- #名字就是简写形式 -->
      <template #header>
        <button>我是按钮</button>
        <span>我是span</span>
      </template>

      <!-- 没有指定名字的，统一会给默认插槽 -->
      <!-- 建议即使是要给默认插槽也建议加一个template -->
      <!-- 废弃的语法 -->
      <!-- <template slot-scope="scope"> -->
      <template v-slot="scope">
        <div>
          <h3>我是h3</h3>
          <p>我是p标签</p>
          <p>{{ scope.xx }} --- {{ scope.row.id }}</p>
        </div>
      </template>
    </my-card>

    <!-- 没有传递插槽-显示默认值 -->
    <my-card />
  </div>
</template>

<script>
import MyCard from './components/MyCard.vue'
export default {
  components: {
    MyCard
  },
  data () {
    return {
      show: true,
      color: 'blue'
    }
  },
  directives: {
    /*
    color: {
      // 参数1：el就是指令所绑定的元素
      // 参数2：binding就是指令的相关信息
      // inserted调用时机：当指令所绑定的元素插入到dom时调用
      inserted (el, binding) {
        // console.log(binding)
        el.style.color = binding.value
      },

      // update调用时机：当指令所绑定的数据发生改变时调用
      // 参数跟inserted一毛一样，但是此时拿到binding.value就是最新的数据
      update (el, binding) {
        // console.log('update来了',binding.value)
        el.style.color = binding.value
      },
    }
   

    // 如果inserted里的代码和update里的代码一样，可以简写
    color (el, binding) {
      el.style.color = binding.value
    }
     */
  }
}
</script>

<style></style>
